<template>
    <div class="">
        <div class="nav_box">
            <router-link to="/">
                <div class="title1">应用介绍</div>
            </router-link>
            <router-link to="/showContainer">
                <div class="title2">产品展示</div>
            </router-link>
            <router-link to="/userS">
                <div class="title3">用户协议</div>
            </router-link>
        </div>
        <div class="image_box">
            <div class="img_lis" v-for="(item, index) in imageArr" :ke="index">
                <img :src="item.image" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'showContainer',
        data() {
            return {
                imageArr: [
                    {
                        image: './static/image/show (1).jpg',
                    },
                    {
                        image: './static/image/show (2).jpg',
                    },
                    {
                        image: './static/image/show (3).jpg',
                    },
                    {
                        image: './static/image/show (4).jpg',
                    },
                    {
                        image: './static/image/show (5).jpg',
                    },
                    {
                        image: './static/image/show (6).jpg',
                    },
                ],
            };
        },
        components: {},
        created() {},
        mounted() {},
        methods: {},
    };
</script>

<style lang="less" scoped>
    .image_box {
        width: 75%;
        margin: 30px auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .img_lis {
            width: 30%;
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
    @keyframes animate {
        0%,
        40%,
        100% {
            transform: translateY(0);
        }

        20% {
            transform: translateY(-5px);
        }
    }
    .nav_box {
        width: 100%;
        height: 60px;
        line-height: 60px;
        color: #565050;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        a {
            width: 25%;
            color: #565050;

            text-align: center;
            text-decoration: none;
        }
        .title1 {
            width: 100%;
            font-size: 16px;
            text-align: center;
            &:hover {
                cursor: pointer;
                color: #ff5c45;
                animation: animate 2s ease-in-out infinite;
                animation-delay: calc(0.1s * var(--i));
                animation-play-state: running;
            }
        }
        .title2 {
            width: 100%;
            font-size: 16px;
            text-align: center;
            color: #ff5c45;
            font-weight: 600;

            border-bottom: 2px solid #ff5c45;

            &:hover {
                cursor: pointer;
                color: #ff5c45;
                animation: animate 2s ease-in-out infinite;
                animation-delay: calc(0.1s * var(--i));
                animation-play-state: running;
            }
        }
        .title3 {
            width: 100%;
            font-size: 16px;
            text-align: center;
            &:hover {
                cursor: pointer;
                color: #ff5c45;
                animation: animate 2s ease-in-out infinite;
                animation-delay: calc(0.1s * var(--i));
                animation-play-state: running;
            }
        }
    }
</style>
